<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>首页</title>
</head>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link
        href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
        rel="stylesheet"
/>
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<link href="cdn/all.css" media="screen" rel="stylesheet"/>
<link href="css/index.css" media="screen" rel="stylesheet"/>
<script src="./js/star.js"></script>

<body>
<div id="app">
    <star>
        <div class="container">
            <div class="bg">
                <template>
                    <el-carousel :interval="4000" height="200px" type="card">
                        <el-carousel-item :key="item" v-for="item in items">
                            <h3 class="medium"><img :src="item" style="width: 480px;height: 200px;"/></h3>
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
            <div class="item1">
                <h1>推荐好友</h1>
                <div class="users">
                    <div class="user-item" style="background-color: rgb(86, 253, 235);" v-for="matchuser in matchusers">
                        <div class="user-img">
                            <a href="#">
                                <img :src="matchuser.avatarUrl"/>
                            </a>
                        </div>
                        <el-tooltip style="width: 400px" class="item" content="点击详情" effect="dark" placement="top">
                            <div class="user-xinxi">
                                <p class="niceng">{{matchuser.username}}</p>
                                <p class="age">个签:{{matchuser.sign}}</p>
                                <p >
                                    <el-tag
                                            :color="getRandomColor()"
                                            style="margin-right: 5px;"
                                            :disable-transitions="false"
                                            :key="tag"
                                            effect="dark"
                                            v-for="tag in matchuser.tags"
                                    >
                                        {{tag}}
                                    </el-tag>
                                </p>
<!--                                <p  class="user-id" style="display: none;">{{matchuser.id}}</p>-->
                            </div>
                        </el-tooltip>
                        <div style="margin-left: 150px;margin-top: 45px">
                            <el-button @click="reqAddFriend(matchuser.id)" type="primary">加好友</el-button>
                            <el-button type="primary" @click="changePage(matchuser.id)">用户详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item2">
                <h1>推荐队伍</h1>
                <div class="teams">
                    <div style="background-color: rgb(24, 178, 126);" class="team-item" v-for="matchteam in matchteams">
                        <div class="top-row">
                            <img :src="matchteam.image"/>
                            <div class="team-xinxi">
                                <h2 class="team-name">{{matchteam.name}}</h2>
                                <p class="leader">{{matchteam.header}}</p>
                            </div>
                            <p class="max-members">人数:{{matchteam.num}}/{{matchteam.maxNum}}</p>
                            <div style="margin-left: 150px;margin-top: 45px">
                                <el-button @click="reqAddTeam(matchteam.id,matchteam.userid)" type="primary">申请加入</el-button>
                            </div>
                        </div>
                        <p class="description"> {{matchteam.description}}</p>
                        <p class="expiry"> {{matchteam.expireTime}}</p>
                    </div>
                </div>
            </div>
<!--            <div class="item3">-->
<!--                <h1>照片墙</h1>-->
<!--                <div class="imgs">-->
<!--                    <div>-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                        <img src="./asset/初中男生.png">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
<!--        <p>示例弹出层：<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>-->
        <div id="light" class="white_content">
            <div class="wrapp" id="tttt" >
                <span class="close" onclick="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'">X</span>
                <h1>你还有没有自己的标签,请选择自己的标签!</h1>
                <ul class="list">
                    <li v-for="i in tag">
                        <h2>{{i.tagname}}</h2>
                        <form action="" method="post">
                            <div class="iitags">
                                <el-checkbox-group v-model="tagss">
                                    <el-checkbox-button :key="ii" :label="ii" :value="ii.tagname" v-for="ii in i.tags">
                                        {{ii.tagname}}
                                    </el-checkbox-button>
                                </el-checkbox-group>
                            </div>
                        </form>
                    </li>
                    <el-button @click="addTag" type="primary">确定</el-button>
                </ul>
            </div>
        </div>
        <div id="fade" class="black_overlay"></div>
    </star>
</div>
</body>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            items: ["./asset/tupian3.jpg", "./asset/tupian1.jpg", "./asset/tupian2.jpg"],
            user: {
                tags: []
            },
            matchusers:[],
            matchteams:[],
            tag: {
                tagname: '',
                tags: []
            },
            tagss: [],
            maginform:{
                senderId:'',
                receiverId:'',
                message:''
            },
            ws:null
        },
        created() {
            let username = sessionStorage.getItem("username");
            this.ws = new WebSocket("ws://127.0.0.1:8003/talk/" + username );
            // this.ws.onopen = (ev)=>{
            // };
            // this.ws.onclose = (ev)=>{};
            // this.ws.onmessage = (ev) => {
            //     console.log(ev);
            //     const h = this.$createElement;
            //     this.$notify({
            //         message: h('i', { style: 'color: teal'}, ev.data)
            //     });
            // }
            let token = sessionStorage.getItem("Token");
            axios.defaults.headers.common['Token'] = token;
            this.haveTag();
            axios.get("tag/tag/getTags").then(res => {
                this.tag = res.data;
            })
            axios.get("match/match/matchuser").then(res => {
                this.matchusers = res.data.data;
                this.matchusers.forEach(user =>{
                    user.tags = JSON.parse(user.tags);
                    if (user.avatarUrl==null) {
                        user.avatarUrl = "./asset/大学男生.png";
                    }
                    if (user.sign==null) {
                        user.sign = "该用户还没有个签";
                    }
                })
                // console.log(this.matchusers);
            })
            axios.get("team/team/matchteams").then(res => {
                this.matchteams = res.data.data;
                this.matchteams.forEach(team =>{
                    if (team.image==null) {
                        team.image = "./asset/大学男生.png";
                    }
                })
                // console.log(this.matchteams);
            })
        },
        methods: {
            reqAddFriend(receiverId){
                this.maginform.receiverId=receiverId;
                this.$prompt('备注消息', '添加好友', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.maginform.message=value;
                    axios.post("user/user/addfriend",this.maginform).then(res=>{
                        if (res.data.code ==1){
                            this.$message({
                                type: 'success',
                                message: '发送好友请求成功,等待对方同意'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消添加'
                    });
                });
            },
            addTag() {
                let tags = [];
                this.tagss.forEach(t=>{
                    tags.push(t.tagname);
                })
                console.log(tags);

                axios.post("user/user/addTag", tags).then(res => {
                    if (res.data.code == 1) {
                        alert('添加成功');
                        location.href = "index.html";
                    } else {
                        alert('添加失败');
                    }
                })
            },
            haveTag() {
                axios.get("/user/user/myInfo").then(res => {
                    if (res.data.code == 1) {
                        //用户标签为空
                        console.log(234567);
                        document.getElementById('light').style.display='block';
                        document.getElementById('fade').style.display='block'
                    } else {
                        document.getElementById('light').style.display='none';
                        document.getElementById('fade').style.display='none'
                    }
                })
            },
            getRandomColor() {
                // 生成随机颜色的方法，这里以示例为主，具体可以根据需求实现
                return "#" + Math.floor(Math.random() * 16777215).toString(16);
            },
            changePage(id){
                location.href="userinfo.html?id=" + id;
            },
            reqAddTeam(id,userid){
                this.$confirm('是否申请加入该队伍', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("team/team/reqaddTeam",  new URLSearchParams({ id: id,userid:userid })).then(res=>{
                        if (res.data.code==1){
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        }else if (res.data.code==2){
                            this.$message({
                                type: 'info',
                                message: '这就是你的队伍'
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: '你已经在队伍里了'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                });
            }
        },

    });

</script>
<script>
    const userItems = document.querySelectorAll('.user-item');

    userItems.forEach(item => {
        const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        item.style.backgroundColor = randomColor;
    });


</script>
</html>
